<template>
    <div class="lo-modal">
        <Modal class="mmodal"
            v-model:open="visible"
            title="Title"
            v-bind="custProps"
            @cancel="onClose"
            :confirm-loading="confirmLoading"
            :maskClosable="false"
            :footer="null" centered>
            <div>
                <slot></slot>
                <div v-if="showButton" class="flex cust_footer">
                    <div class="flex-1"></div>
                    <a-button v-if="showCancel" @click="handleCancel" :style="cancelStyle" class="mar-r10">{{cancelText}}</a-button>
                    <a-button @click="handleOk" type="primary">{{confirmText}}</a-button>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script lang="jsx" setup>
import { Modal } from 'ant-design-vue';
import { ref, onMounted, onActivated, useAttrs, computed } from 'vue'


defineOptions({
    inheritAttrs: false
})
defineProps({
    showButton: {
        type: Boolean,
        default: true
    },
    showCancel: {
        type: Boolean,
        default: true
    },
    cancelText: {
        type: String,
        default: '取消'
    },
    cancelStyle: {
        type: String,
        default: ''
    },
    confirmText: {
        type: String,
        default: '确定'
    },
})

const attrs = useAttrs()
const custProps = computed(() => {
    let c = {
        ...attrs
    }
    delete c.onCancel
    return c
})

const visible = ref(false)
const confirmLoading = ref(false)


let promiseResolve = null
function open() {
    visible.value = true
    return new Promise((resolve, reject) => {
        promiseResolve = resolve
        visible.value = true
    })
}
function close() {
    visible.value = false
    promiseResolve = null
}

function handleOk() {
    if(attrs.onConfirm) {
        attrs.onConfirm()
    } else {
        promiseResolve()
        close()
    }
}

function handleCancel() {
    if(attrs.onCancel) {
        attrs.onCancel()
    } else {
        close()
    }
}

function onClose(e) {
    if(attrs.onClose) {
        attrs.onClose()
    } else {
        close()
    }
}

defineExpose({
    open,
    close
})



</script>

<style lang="less" scoped>

</style>
